import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import sty from './css/list.module.less'

// 状态提升  就是组件自己的state中的某些属性 提升到先辈组件的属性，然后通过props在去接收

function Child1(props) {
  let [age, setAge] = useState(100)
  // let [name, setName] = useState("珠峰")
  return <>
    <h2>{props.name}{age}</h2>
    <input type="text" value={props.name} onChange={e => {
      props.onName(e.target.value)
    }} />
  </>
}
function Child2(props) {
  let [sex, setSex] = useState("男")
  // let [name, setName] = useState("珠峰")
  return <>
    <h2 id={sty.qq}>{props.name}{sex}</h2>
    <input type="text" value={props.name} onChange={e => {
      props.onName(e.target.value)
    }} />
  </>
}
class App extends React.Component {
  state = {
    name: "珠峰"
  }
  fn = (name) => {
    this.setState({
      name: name
    })
  }
  render() {
    return <div className=''>
      <Child1 name={this.state.name} onName={this.fn} />
      <Child2 name={this.state.name} onName={this.fn} />
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))